<template>
  <div>

    <el-table
      :data="drivers"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column
        type=""
        width="55">
      </el-table-column>

      <el-table-column
        prop="driverId"
        label="司机编号"
      >
      </el-table-column>

      <el-table-column
        prop="carrierNumber"
        label="所属承运商"
        :formatter="carrierFormatter"
      >
      </el-table-column>


      <el-table-column
        prop="driverName"
        label="姓名">
        <template slot-scope="scope">
          {{scope.row.driverName}}
          <span class="el-icon-s-unfold" @click="showDetail(scope.row)"></span>
        </template>
      </el-table-column>

      <el-table-column
        prop="driverPhone"
        label="电话号码">
        <template slot-scope="scope">
          {{scope.row.driverPhone}}
          <span class="el-icon-phone-outline"></span>
        </template>
      </el-table-column>

    </el-table>

    <!--  分页插件  -->
    <el-pagination
      style="padding: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!--  司机个人信息展示  -->
    <el-dialog
      title=""
      :visible.sync="driverDialogVisible"
      width="30%"
      :datasrc="driver"
      :before-close="driverHandleClose">

      <div>
        <el-card class="box-card" style="text-align:center">
          <div slot="header" class="clearfix">
            <el-button type="text"></el-button>
          </div>

          <el-image
            style="width: 120px; height: 100px;text-align:center"
            :src="informations[sss].face"
          >
          </el-image>
          <br>
          姓名：{{driver.driverName}}<br>
          个人邮箱：{{driver.email}}<br>
          家庭地址：{{driver.address}}<br><br>
          客户评分：
          <el-rate
            v-model="driver.grade"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </el-card>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="driverDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        grade: 4.1,
        currentPage: 1,
        pageSizes: [2, 4, 6, 8],
        pageSize: 2,
        total: 0,
        drivers: [],
        driver: {},
        driverDialogVisible: false,
        informations: [
          {
            value: 1,
            face: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190320%2F24e69e6bd3d14bae98b60c6b01ef1ac6.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658242605&t=a69952954dce3669adc582666f02abe1',
          },
          {
            value: 2,
            face: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F06%2F09130915900535.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658242605&t=1e8c7191bd8c65cfc35df0ea7e4acf39',
          }, {
            value: 3,
            face: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Fface%2F0814897ea66dc363bcc8739e0e2cf553df178f9b.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658242814&t=6c363958b8857d68c6e22fd570fda842',
          }, {
            value: 4,
            face: 'https://pic.rmb.bdstatic.com/ad8aeb1390bfd02912c18b60f014a37a.gif'
          }, {
            value: 5,
            face:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fws1.sinaimg.cn%2Flarge%2F006mowZnly1fwr5knq41vj306y06bq2w.jpg&refer=http%3A%2F%2Fws1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658396819&t=dfbcd6a5cdcaab8119a25048bf339669'
          }, {
            value: 6,
            face:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14779217792%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658397039&t=c32ff0f2d66f87131e4a63d9cb1b227d'
          },
        ],
        information: {},
        carCarriers: [],
        sss: 0,

      }
    },
    methods: {
      formatter(scope) {

      },
      carrierFormatter(row) {
        console.log('row = ', row);
        for (let carCarrier of this.carCarriers) {
          if (row.carrierNumber == carCarrier.carrierNumber) {
            return carCarrier.carrierName;
          }
        }
      },
      //司机名片关闭时执行
      driverHandleClose() {
        this.driver = {};
        this.driverDialogVisible = false;
      },
      //点击展示司机详细
      showDetail(row) {
        this.driver = row;
        this.sss = row.driverId - 1;
        console.log('this.driver = ', this.driver);
        // for(let information of  this.informations){
        //   if (row.driverId == information.value){
        //     this.information = information;
        //   }
        // }

        this.driverDialogVisible = true;
      },
      //多选框选中触发
      handleSelectionChange(row) {
        console.log('row = ', row);
      },
      //当前页数发生改变时触发
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(this.currentPage);
        this.findAllDrivers(this.currentPage, this.pageSize)
      },
      //当页面大小发生改变时触发
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(this.pageSize);
        this.findAllDrivers(this.currentPage, this.pageSize)
      },
      findAllDrivers(currentPage, pageSize) {
        this.$http({
          method: "get",
          url: "http://localhost/carDriver",
          params: {
            currentPage: currentPage,
            pageSize: pageSize,
          }
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('carManagement = ', resp.data.data);
            this.drivers = resp.data.data.list;
            this.total = resp.data.data.total;
          }
        })
      },
      findCarrier() {
        this.$http({
          method: "get",
          url: "http://localhost/carCarrier/list",
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('findCarrier = ', resp.data.data);
            this.carCarriers = resp.data.data;
          }
        })
      },
    },
    created() {
      this.findAllDrivers(1, 2);
      this.findCarrier();

    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

</style>
